<template>
  <div id="index-box">
    <!-- 导航栏-------开始 -->
    <el-menu
      :default-active="activeHeader"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-s-order"></i>
        <a href="#" target="_blank">订单管理</a></el-menu-item
      >
    </el-menu>
    <!-- 导航栏-----结束 -->
    <!-- Breadcrumb 面包屑----开始 -->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="line-height:40px;cursor: pointer;margin-left:20px;"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>列车查询</el-breadcrumb-item>
      <el-breadcrumb-item>订票管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- Breadcrumb 面包屑----结束 -->

    <!-- 火车票查询 -->
    <el-container>
      <el-header>
        <i
          class="
                          el-icon-bell"
        ></i>
        <span class="infos"
          >今天是 01月05日 星期日
          电话及网络可预订02月03日车票，可预约预订03月04日车票</span
        >
        <!-- <el-link type="primary"
                 class="order-train">火车票订单 ></el-link> -->
      </el-header>
      <!-- 车票查询 -->
      <el-container>
        <el-aside width="500px">
          <div class="smt">
            <h3><i class="icon-train"></i>火车票查询</h3>
          </div>
          <br />
          <!-- 火车票查询 -->
          <!-- 换 -->
          <span class="line-zs "></span>
          <span class="iconfont icon-huan" @click="huanClick"></span>
          <!-- 查询表单 -->
          <el-form
            :model="Trainform"
            :rules="rules"
            ref="Trainform"
            label-width="110px"
          >
            <!-- 出发城市 -->
            <el-form-item label="出发城市" prop="formStation">
              <el-input
                v-model="Trainform.formStation"
                placeholder="城市名/车站名"
                style="width:280px"
                clearable
              ></el-input>
            </el-form-item>

            <!-- 到达城市 -->
            <el-form-item label="到达城市" prop="toStation">
              <el-input
                v-model="Trainform.toStation"
                placeholder="城市名/车站名"
                style="width:280px"
                clearable
              ></el-input>
            </el-form-item>
            <!-- 出发日期 -->
            <el-form-item label="出发日期" prop="formDate">
              <el-date-picker
                style="width:280px"
                v-model="Trainform.formDate"
                align="right"
                type="date"
                placeholder="选择出发日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-checkbox-group v-model="Trainform.checked">
                <el-checkbox>仅搜高铁和动车</el-checkbox>
                <el-button type="primary" @click="submitForm('Trainform')"
                  >立即搜索</el-button
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-aside>
        <!-- 广告图片轮播 -->
        <el-main>
          <el-carousel height="350px">
            <el-carousel-item v-for="Ad in imagesbox" :key="Ad.id">
              <!-- <h3 class="small">{{ Ad }}</h3> -->
              <img :src="Ad.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </el-main>
      </el-container>
    </el-container>
    <!-- 热门推荐 -->
    <el-container>
      <el-header>
        <!-- <svg class="icon-remen" aria-hidden="true">
  <use xlink:href="#icon-remen"></use>
</svg> -->
        <div class="rmtj">
          <span class="iconfont icon-remen"></span>热门推荐
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="hotRoute" @tab-click="hotRouteClick">
          <el-tab-pane
            v-for="cityTab in cityRouteTabs"
            :label="cityTab.city"
            :key="cityTab.name"
            :name="cityTab.name"
          >
            <ul class="hot-stations">
              <li v-for="city in cityRoute">
                <a
                  href="#"
                  style="text-decoration:none"
                  @click="openFullScreen"
                >
                  <div class="station-name">
                    <span>{{ city.formCity }}</span>
                    <i class="iconfont icon-ttk_index_pointerx1"></i>
                    <span>{{ city.toCity }}</span>
                  </div>
                  <p class="station-price">
                    <span>￥</span>
                    <span class="price-num">{{ city.routePrice }}</span>
                    <span>元</span>
                  </p>
                </a>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <!-- 常见问题 -->
    <el-container>
      <el-header>
        <div class="cjwt">
          <span class="iconfont icon-changjianwenti"></span>常见问题
        </div>
      </el-header>
      <el-main>
        <!--常见问题-->
        <div class="issue-content">
          <ul>
            <li class="single-issue" v-for="problem in issueContent">
              <h5 class="issue-title">{{ problem.title }}</h5>
              <div class="issue-detail">{{ problem.detail }}</div>
              <a target="_blank" href="#" class="more-issue">{{
                problem.more
              }}</a>
            </li>
          </ul>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      keyword: "",
      result: "",
      //导航栏
      activeHeader: "1",
      //广告轮播图片
      imagesbox: [
        { id: 0, idView: require("../../assets/images/img1.jpg") },
        { id: 1, idView: require("../../assets/images/img2.jpg") },
        { id: 2, idView: require("../../assets/images/img1.jpg") },
        { id: 3, idView: require("../../assets/images/img2.jpg") }
      ],
      //常见问题
      issueContent: [
        {
          title: "身份验证",
          detail:
            "2014年新规：从未在网络购票的用户，请先携身份证去火车站专门窗口核验身份证信息，核验通过后才能网上购票",
          more: "更多>>"
        },
        {
          title: "取票方式",
          detail:
            "若您使用二代居民身份证进行的预订，可凭预订时所使用的乘车人有效身份证件原件到车站售票窗口、铁路客票代售点或车站自动售票机上办理换票.....",
          more: "更多>>"
        },
        {
          title: "如何退票",
          detail:
            "预订火车票成功后，如未取票且离产品内显示的火车发车时间大于1小时30分钟，您可在线申请退票。预订成功后，如已取票或离 产品内显示的火车......",
          more: "更多>>"
        },
        {
          title: "如何改签",
          detail:
            "预订成功后，如需办理订单内的车票改签，可凭购票证件原件到车站窗口办理或登录京东原预订账户，在订单详情中申请在线改签，在线改签服务时......",
          more: "更多>>"
        }
      ],
      // 点击选择tabs城市数据
      cityRoutes: [
        { formCity: "北京", toCity: "南宁", routePrice: 268.5 },
        { formCity: "北京", toCity: "广州", routePrice: 251.0 },
        { formCity: "北京", toCity: "厦门", routePrice: 243.0 },
        { formCity: "北京", toCity: "上海", routePrice: 156.5 },
        { formCity: "北京", toCity: "杭州", routePrice: 189.5 },
        { formCity: "北京", toCity: "武汉", routePrice: 152.5 },
        { formCity: "北京", toCity: "长沙", routePrice: 189.5 },
        { formCity: "北京", toCity: "合肥", routePrice: 138.5 },
        { formCity: "北京", toCity: "东莞", routePrice: 251.0 },
        { formCity: "北京", toCity: "深圳", routePrice: 254.5 },
        { formCity: "北京", toCity: "昆明", routePrice: 302.5 },
        { formCity: "北京", toCity: "南京", routePrice: 130.5 },

        { formCity: "上海", toCity: "天津", routePrice: 143.5 },
        { formCity: "上海", toCity: "深圳", routePrice: 234.0 },
        { formCity: "上海", toCity: "东莞", routePrice: 217.0 },
        { formCity: "上海", toCity: "苏州", routePrice: 12.5 },
        { formCity: "上海", toCity: "贵阳", routePrice: 229.0 },
        { formCity: "上海", toCity: "厦门", routePrice: 163.5 },
        { formCity: "上海", toCity: "福州", routePrice: 128.5 },
        { formCity: "上海", toCity: "广州", routePrice: 189.5 },
        { formCity: "上海", toCity: "合肥", routePrice: 78.0 },
        { formCity: "上海", toCity: "重庆", routePrice: 224.0 },
        { formCity: "上海", toCity: "武汉", routePrice: 135.5 },
        { formCity: "上海", toCity: "南宁", routePrice: 224.5 },

        { formCity: "广州", toCity: "济南", routePrice: 224.0 },
        { formCity: "广州", toCity: "厦门", routePrice: 102.0 },
        { formCity: "广州", toCity: "南京", routePrice: 206.0 },
        { formCity: "广州", toCity: "长沙", routePrice: 98.0 },
        { formCity: "广州", toCity: "昆明", routePrice: 229.0 },
        { formCity: "广州", toCity: "合肥", routePrice: 192.0 },
        { formCity: "广州", toCity: "福州", routePrice: 345.0 },
        { formCity: "广州", toCity: "苏州", routePrice: 213.0 },
        { formCity: "广州", toCity: "西安", routePrice: 224.0 },
        { formCity: "广州", toCity: "太原", routePrice: 268.5 },
        { formCity: "广州", toCity: "天津", routePrice: 251.0 },
        { formCity: "广州", toCity: "杭州", routePrice: 173.5 },

        { formCity: "深圳", toCity: "济南", routePrice: 229.0 },
        { formCity: "深圳", toCity: "苏州", routePrice: 260.0 },
        { formCity: "深圳", toCity: "上海", routePrice: 234.0 },
        { formCity: "深圳", toCity: "郑州", routePrice: 201.0 },
        { formCity: "深圳", toCity: "天津", routePrice: 254.5 },
        { formCity: "深圳", toCity: "杭州", routePrice: 219.5 },
        { formCity: "深圳", toCity: "福州", routePrice: 383.0 },
        { formCity: "深圳", toCity: "西安", routePrice: 236.0 },
        { formCity: "深圳", toCity: "昆明", routePrice: 206.0 },
        { formCity: "深圳", toCity: "南京", routePrice: 234.5 },
        { formCity: "深圳", toCity: "南宁", routePrice: 124.0 },
        { formCity: "深圳", toCity: "广州", routePrice: 21.5 },

        { formCity: "成都", toCity: "济南", routePrice: 251.0 },
        { formCity: "成都", toCity: "上海", routePrice: 259.0 },
        { formCity: "成都", toCity: "合肥", routePrice: 208.0 },
        { formCity: "成都", toCity: "厦门", routePrice: 1045.0 },
        { formCity: "成都", toCity: "昆明", routePrice: 481.5 },
        { formCity: "成都", toCity: "南宁", routePrice: 180.5 },
        { formCity: "成都", toCity: "福州", routePrice: 254.5 },
        { formCity: "成都", toCity: "杭州", routePrice: 236.5 },
        { formCity: "成都", toCity: "广州", routePrice: 206.0 },
        { formCity: "成都", toCity: "苏州", routePrice: 252.0 },
        { formCity: "成都", toCity: "深圳", routePrice: 251.0 },
        { formCity: "成都", toCity: "郑州", routePrice: 168.5 }
      ],
      //城市旅游线路---默认显示
      cityRoute: [
        { formCity: "北京", toCity: "南宁", routePrice: 268.5 },
        { formCity: "北京", toCity: "广州", routePrice: 251.0 },
        { formCity: "北京", toCity: "厦门", routePrice: 243.0 },
        { formCity: "北京", toCity: "上海", routePrice: 156.5 },
        { formCity: "北京", toCity: "杭州", routePrice: 189.5 },
        { formCity: "北京", toCity: "武汉", routePrice: 152.5 },
        { formCity: "北京", toCity: "长沙", routePrice: 189.5 },
        { formCity: "北京", toCity: "合肥", routePrice: 138.5 },
        { formCity: "北京", toCity: "东莞", routePrice: 251.0 },
        { formCity: "北京", toCity: "深圳", routePrice: 254.5 },
        { formCity: "北京", toCity: "昆明", routePrice: 302.5 },
        { formCity: "北京", toCity: "南京", routePrice: 130.5 }
      ],
      // 热门推荐城市tab选择
      cityRouteTabs: [
        { city: "北京", name: "beijing" },
        { city: "上海", name: "shanghai" },
        { city: "广州", name: "guangzhou" },
        { city: "深圳", name: "shengzheng" },
        { city: "成都", name: "chengdu" }
      ],

      //火车票查询 表单
      Trainform: {
        formStation: "",
        toStation: "",
        formDate: "",
        checked: false
      },
      // 热门线路
      hotRoute: "beijing",
      // 验证
      rules: {
        formStation: [
          { required: true, message: "请输入出发城市", trigger: "blur" }
        ],
        toStation: [
          { required: true, message: "请输入到达城市", trigger: "blur" }
        ],
        formDate: [
          {
            type: "date",
            required: true,
            message: "请选择出发日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(Trainform) {
      this.$refs[Trainform].validate(valid => {
        if (valid) {
          // alert('submit!');
          const loading = this.$loading({
            lock: true,
            text: "正在拼命搜索中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    hotRouteClick(tab, event) {
      console.log(tab, event);
      // 获取路线
      let citys = this.cityRoutes;
      console.log(citys);
      // 过滤选择路线
      let Filtercitys = citys.filter(item => {
        console.log(tab.label);
        return item.formCity == tab.label;
      });
      this.cityRoute = Filtercitys;
      console.log(Filtercitys);
    },
    //加载loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载路线中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    //交换城市
    huanClick() {
      let temp = this.Trainform.formStation;
      this.Trainform.formStation = this.Trainform.toStation;
      this.Trainform.toStation = temp;
    },
    //导航栏选择
    handleSelect(key, keyPath) {
      console.log("key-------", key);
      console.log("keyPath--------", keyPath);
    }
  }
};
</script>

<style scoped>
#index-box {
  width: 1500px;
  margin: 0 auto;
  background-color: #e9eef3;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  background-color: #fff;
  color: #333;
  width: 480px;
  height: 350px;
  margin-top: 20px;
  margin-left: 10px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;

  line-height: 80px;
}
.infos {
  width: 560px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: white;
  font-size: 18px;
}
/*时间*/
.icon-note {
  width: 9px;
  height: 14px;
  display: inline-block;
  vertical-align: text-top;
  background: url;
  margin-top: 3px;
  margin-right: 8px;
  margin-left: 3px;
}
/*火车票订单*/
.order-train {
  /* color: #005ea7; */
  position: relative;
  float: right;
}
/* 广告图片轮播 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.image {
  width: 100%;
  height: 350px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
/* .train_choose{
  width: 480px;
  height: 350px;
  margin-top: 20px;
  margin-left: 10px;
  border:1px solid gray;
  background-color: #d3dce6
} */
/* 火车图标 */
.smt {
  border-bottom: 1px solid #e7e7e7;
}
.icon-train {
  display: inline-block;
  width: 32px;
  height: 20px;
  background: url("/static/images/train-logo.png");
  vertical-align: middle;
  margin-right: 9px;
  margin-left: 20px;
}
/* 换icon */
.el-aside .line-zs {
  position: relative;
  top: 32px;
  width: 30px;
  height: 40px;
  border: 1px solid #e7e7e7;
  border-left: 0;
  right: 80px;
  float: right;
}
.icon-huan {
  width: 40px;
  height: 40px;
  color: #2ebdff;
  position: relative;
  float: right;
  right: 10px;
  top: 30px;
}
/* 搜索按钮 */
.el-button {
  margin-left: 46px;
}

/* 热门推荐icon,常见问题 */
.rmtj,
.cjwt {
  font-size: 30px;
}
.rmtj .icon-remen,
.cjwt .icon-changjianwenti {
  width: 60px;
  height: 60px;
  color: red;
  font-size: 30px;
}
/* 热门推荐线路 */
.el-tabs {
  margin-top: -20px;
}
.hot-stations {
  margin-left: 45px;
}
.hot-stations li {
  width: 167px;
  height: 77px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 4px;
  float: left;
  margin: 10px 10px 10px 30px;
  cursor: pointer;
  text-align: center;
  list-style: none;
}
.hot-stations li:hover {
  border: 1px solid #2ebdff;
}
/*站台名称*/
.hot-stations li .station-name {
  font-size: 14px;
  color: #222;
  line-height: 20px;
  margin: 10px 0 9px;
}
/*箭头*/
.hot-stations li .station-name .icon-ttk_index_pointerx1 {
  font-size: 27px;
  color: #d8d8d8;
  margin: 0 8px;
  vertical-align: sub;
  display: inline-block;
}
.icon-ttk_index_pointerx1:before {
  content: "—";
  box-sizing: border-box;
  margin: 0;
  box-sizing: inherit;
}
.iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*线路价钱*/
.hot-stations li .station-price {
  line-height: 25px;
  color: #f90;
  font-size: 12px;
  font-weight: 700;
}
/*常见问题内容部分*/
.issue-content {
  margin-top: 20px;
  overflow: hidden;
}
.issue-content ul {
  zoom: 1;
  margin-left: 5px;
}
.issue-content .single-issue {
  float: left;
  display: inline;
  width: 320px;
  height: 200px;
  background: #f0f8ff;
  border: 1px dashed #2ebdff;
  position: relative;
  zoom: 1;
  margin-left: 14px;
  line-height: 25px;
}
/*标题*/
.issue-content .single-issue .issue-title {
  font-size: 18px;
  color: #52555b;
  font-weight: 400;
  margin: 15px 0 0 25px;
}
/*详情*/
.issue-content .single-issue .issue-detail {
  color: #84898d;
  width: 238px;
  height: 50px;
  margin: 15px auto;
  font-size: 13px;
}
/*更多*/
.issue-content .single-issue .more-issue {
  position: absolute;
  font-size: 12px;
  color: #8b867e;
  bottom: 10px;
  right: 25px;
}
</style>
